<template>
  <div class="record">
    <div class="back-top">
      <div class="b-back" @click="$router.back(-1)">
        <img class="b-back" src="../../assets/l_jt.png" alt />
      </div>
      <div class="w_tab">
        <div
          class="tab1"
          v-for="(item,index) in btn"
          :key="index"
          @click="tab(index)"
          :class="{active:indexs==index}"
        >{{item}}</div>
      </div>
    </div>
    <div class="view-wrapper">
      <div class="tuiguang" v-show="isShow1">
        <div class="w_tab2">
          <div
            class="tab2"
            v-for="(item,index) in btn1"
            :key="index"
            @click="tab1(index)"
            :class="{active:indext==index}"
          >{{item}}</div>
        </div>
        <div class="tg_block">
          <div class="content">
            <div class="ns1">
              <p class="ws1">交易者UID</p>
              <p class="ws2">邀请人数</p>
              <p class="ws2">手机尾号</p>
            </div>
            <div v-for="(item, index) in items" :key="index">
              <div class="ns2">
                <p class="ws1">{{item.id}}</p>
                <p class="ws2">{{item.teamnumber}}</p>
                <p class="ws2">{{item.mobile}}</p>
              </div>
            </div>
            <p class="pull" ref="yins">{{newxin}}</p>
          </div>
        </div>
      </div>
      <div class="shouyi" v-show="isShow2">
        <div class="wt_block" v-for="(item,index) in earnings" :key="index">
          <div class="head">
            <div class="head_left">
              <span class="nsb1" v-if="item.type==2">卖出</span>&nbsp;
              <span class="nsb2" v-if="item.type==1">买入</span>&nbsp;
              <span class="ns2">{{item.fieldtype}}/{{item.legaltype}}</span>&nbsp;
              <span class="ns3">{{item.createtime}}</span>&nbsp;
            </div>
            <div class="head_right">
              <span>奖励 {{item.money}}</span>
            </div>
          </div>
          <div class="content1">
            <div class="ns1">
              <p class="ws1">交易者UID</p>
              <p class="ws2">{{item.uid}}</p>
            </div>
            <div class="ns2">
              <p class="ws1">订单号</p>
              <p class="ws2">{{item.ordersn}}</p>
            </div>
            <div class="ns3">
              <p class="ws1">数量</p>
              <p class="ws2">{{item.allnumber}}</p>
            </div>
          </div>
        </div>
        <p class="pull" ref="yins">{{newxin}}</p>
      </div>
      <!-- <cube-recycle-list class="list"  :size="size" :on-fetch="onFetcha" :offset="offset">
            <template slot="item" slot-scope="{ data }">
            <div :id="data.id" class="item" @click="handleClick(data)">
                <div class="avatar" :style="{backgroundImage: 'url(' + (data.avatar || '') + ')'}"></div>
                <div class="bubble">
                <p>{{ data.msg }}</p>
                <div class="meta">
                    <time class="posted-date">{{ data.time }}</time>
                </div>
                </div>
            </div>
            </template>
      </cube-recycle-list>-->
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";

export default {
  name: "record",
  components: {
    Tabbar
  },
  data() {
    return {
      size: 50,
      offset: 100,
      indexs: 0,
      indext: 0,
      btn: ["推广明细", "收益明细"],
      btn1: ["一代", "二代", "三代"],
      isShow1: true,
      isShow2: false,
      items: [],
      itemss: [],
      earnings: [],
      page: 1,
      page1: 1,
      newxin:"",
      type:1,
    };
  },
  created: function() {
    this.earningscli();
  },
   mounted() {
     this.getgeneralize(1);
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    getgeneralize(type,s) {
      var page = this.page;
      var limit = 20;

      this.$axios
        .post("/index/usercenter/generalize", {
          page: page,
          limit: limit,
          type: type
        })
        .then(res => {
          console.log(res);
              if(res.data.code==0&&res.data.info.length>0){
                var he=()=>{
                    for(var i=0; i<res.data.info.length; i++){
                      this.items.push(res.data.info[i])
                    }
                }
                !s&&res.data.info.length<19?(this.items=res.data.info,this.newxin="已加载完所有数据"):
                !s&&res.data.info.length>19?(this.items=res.data.info,this.newxin="下拉更新"):"";
                s&&res.data.info.length<19?(he(),this.newxin="已加载完所有数据")
                :s?(he(),this.newxin="下拉更新"):'';
            }else{
              !s?(this.newxin="",this.items = []):this.newxin="已加载完所有数据";
            }
        });
    },
    earningscli(s) {
      this.$axios.post("/index/usercenter/earnlog", {
        page: this.page1,
        limit:20
      })
      .then(res=>{
          console.log(res.data,'数据');
              if(res.data.code==0&&res.data.info.length>0){
                var he=()=>{
                    for(var i=0; i<res.data.info.length; i++){
                      this.earnings.push(res.data.info[i])
                    }
                }
                !s&&res.data.info.length<19?(this.earnings=res.data.info,this.newxin="已加载完所有数据"):
                !s&&res.data.info.length>19?(this.earnings=res.data.info,this.newxin="下拉更新"):"";
                s&&res.data.info.length<19?(he(),this.newxin="已加载完所有数据")
                :s?(he(),this.newxin="下拉更新"):'';
            }else{
              !s?this.newxin="":this.newxin="已加载完所有数据";
            }

      })
    },
    tab(str) {
      this.indexs = str;
      if (this.indexs == 0) {
        this.isShow1 = true;
        this.isShow2 = false;
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    tab1(str) {
      this.indext = str;
      this.page=1;
      if (this.indext == 0) {
        var type = 1;
        this.type=type;
        this.getgeneralize(type);
      } else if (this.indext == 1) {
        var type = 2;
        this.type=type;
        this.getgeneralize(type);
      } else {
        var type = 3;
        this.type=type;
        this.getgeneralize(type);
      }
    },
    //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        console.log(this.earnings.length,this.type,' kk')
        if(this.isShow1){
            this.items.length > 19 ? (this.page++,this.getgeneralize(this.type,this.page)) : "";
        }else{
            this.earnings.length > 19 ? (this.page1++,this.earningscli(this.page1)) : "";
        }
        return false;
      }
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
  text-align: center;
}
.record {
  /* 限制视口 包裹组件*/
  .view-wrapper {
    // position: fixed;
    padding-top: 1.6rem;
    left: 0;
    bottom: 0;
    width: 100%;
    .tg_block {
      .content {
        .ns1 {
          .f-flex();
          padding-left: 4%;
          padding-right: 4%;
          justify-content: space-between;
          height: 1.333333rem;
          line-height: 1.333333rem;
          border-bottom: 1px solid #f1f1f1;
          .ws1,
          .ws2,
          .ws3 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            text-align: center;
          }
        }
        .ns2 {
          .f-flex();
          padding-left: 4%;
          padding-right: 4%;
          height: 1.333333rem;
          line-height: 1.333333rem;
          justify-content: space-between;
          .ws1,
          .ws2,
          .ws3 {
            color: #000;
            font-size: 0.426667rem;
            text-align: center;
          }
        }
      }
    }
    .wt_block {
      padding: 0.533333rem 0.4rem;
      border-bottom: 1px solid #f1f1f1;
      .head {
        .f-flex();
        justify-content: space-between;
        .head_left {
          .nsb1 {
            color: #e56337;
            font-size: 0.453333rem;
            font-weight: bold;
          }
          .nsb2 {
            color: #00bd84;
            font-size: 0.453333rem;
            font-weight: bold;
          }
          .ns2 {
            color: #000;
            font-size: 0.453333rem;
            font-weight: bold;
          }
          .ns3 {
            color: #a1a7b7;
            font-size: 0.32rem;
          }
          .ns4 {
            color: #a1a7b7;
            font-size: 0.32rem;
          }
        }
        .head_right {
          .f-flex();
          span {
            color: #000;
            font-size: 0.373333rem;
            font-weight: bold;
            text-align: right;
          }
          img {
            width: 0.2rem;
            height: 0.3rem;
          }
        }
      }
      .content1 > .ns1 {
        width: 35%;
      }
      .content1 > .ns2 {
        width: 30%;
      }
      .content1 > .ns3 {
        width: 35%;
      }
      .content1 > .ns3 > .ws1 {
        text-align: right;
      }
      .content2 > .ns1 {
        width: 35%;
      }
      .content2 > .ns2 {
        width: 30%;
      }
      .content2 > .ns3 {
        width: 35%;
      }
      .content2 > .ns3 > .ws1 {
        text-align: right;
      }
      .content1 {
        margin-top: 0.533333rem;
        .f-flex();
        justify-content: space-between;
        .ns1 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns2 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns3 {
          text-align: right;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
            text-align: right;
          }
        }
      }
      .content2 {
        .f-flex();
        margin-top: 0.273333rem;
        justify-content: space-between;
        .ns1 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns2 {
          text-align: left;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
          }
        }
        .ns3 {
          text-align: right;
          margin-bottom: 0.266667rem;
          .ws1 {
            color: #b9bfd2;
            font-size: 0.32rem;
            font-weight: bold;
            margin-bottom: 0.266667rem;
          }
          .ws2 {
            color: #a1a7b7;
            font-size: 0.426667rem;
            font-weight: bold;
            text-align: right;
          }
        }
      }
    }
  }
  .b-back {
    position: absolute;
    left: 0.4rem;
    top: 0.3rem;
    height: 1.6rem;
    img {
      width: 0.213333rem;
      height: 0.373333rem;
    }
  }
  .xiaohua {
    width: 0.506667rem;
    position: absolute;
    right: 0.4rem;
    top: 0.6rem;
  }
  .w_tab {
    height: 1.6rem;
    .f-flex();
    justify-content: center;
    .tab1 {
      color: #737a92;
      border: 1px solid#c3c6cf;
      position: relative;
      font-size: 0.373333rem;
      height: 0.88rem;
      width: 2.133333rem;
      line-height: 0.88rem;
      text-align: center;
    }
    .tab1.active {
      background-color: #f57d13;
      color: #fff;
      border-radius: 0;
    }
  }
  .w_tab2 {
    .f-flex();
    justify-content: center;
    .tab2 {
      color: #737a92;
      border: 1px solid#c3c6cf;
      position: relative;
      font-size: 0.373333rem;
      height: 0.88rem;
      width: 33.3%;
      line-height: 0.88rem;
      text-align: center;
    }
    .tab2.active {
      background-color: #f57d13;
      color: #fff;
      border-radius: 0;
    }
  }
}

.back-top{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
</style>

